<template>
    <div class="login">
        <h3 class="login-title" v-if="passwordGrant">账号密码登录</h3>
        <h3 class="login-title" v-if="captchaGrant">验证码登录</h3>
        <p class="login-safe-tips">为了你的帐号安全，请用手机号登录</p>
        <mobile-password-form v-model="mobileValue" :loading="loading" @submit="handleLogin" v-if="passwordGrant"/>
        <mobile-captcha-form v-model="mobileValue" :loading="loading" @submit="handleLogin" v-if="captchaGrant"/>
        <div class="login-other-actions">
            <van-button plain type="info" size="small" v-if="passwordGrant" @click.stop="handleCaptchaGrant">验证码登录</van-button>
            <van-button plain type="info" size="small" v-if="captchaGrant" @click.stop="handlePasswordGrant">密码登录</van-button>
            <div class="login-other-actions-right">
                <van-button plain type="info" size="small" v-if="passwordGrant">忘记密码</van-button>
                <divider v-if="passwordGrant"/>
                <van-button plain type="info" size="small" to="/register">免费注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
  import WingBlank from "@/components/WingBlank"
  import { Button, Field, Form, Toast } from "vant"
  import Divider from "@/components/Divider"
  import { message, security } from "@mall/api-services"
  import MobilePasswordForm from "@/views/user/MobilePasswordForm"
  import MobileCaptchaForm from "@/views/user/MobileCaptchaForm"
  import md5 from "crypto-js/md5"

  const { GrantType } = security
  export default {
    name: "Login",
    components: {
      MobileCaptchaForm,
      MobilePasswordForm,
      Divider,
      WingBlank,
      [Button.name]: Button,
      [Form.name]: Form,
      [Field.name]: Field,
    },
    props: {
      mobile: String,
      grantType: {
        type: String,
        default: GrantType.MobilePassword,
      },
    },
    computed: {
      captchaGrant() {
        return this.grantType === GrantType.Captcha
      },
      passwordGrant() {
        return this.grantType === GrantType.MobilePassword
      },
      grantTypeValue: {
        get() {
          return this.grantType
        },
        set(grantType) {
          const { mobile } = this
          this.$router.replace({
            path: "/login",
            query: {
              mobile,
              grant_type: grantType,
            },
          })
        },
      },
    },
    data() {
      return {
        loading: false,
        mobileValue: "",
      }
    },
    created() {
      this.mobileValue = this.mobile
    },
    methods: {
      handleCaptchaGrant() {
        this.grantTypeValue = GrantType.Captcha
      },
      handlePasswordGrant() {
        this.grantTypeValue = GrantType.MobilePassword
      },
      handleLogin(values) {
        if (this.grantTypeValue === GrantType.MobilePassword) {
          const password = md5(values.password).toString()
          const credentials = new security.MobilePasswordCredentials()
          credentials.countryCode = "+86"
          credentials.mobile = values.mobile
          credentials.password = password
          this.mobilePasswordLogin(credentials)
        } else if (this.grantTypeValue === GrantType.Captcha) {
          const credentials = new security.CaptchaCredentials()
          credentials.token = values.token
          credentials.code = values.code
          this.mobilePasswordLogin(credentials)
        } else {
          Toast("不支持此方式登录")
        }
      },
      mobilePasswordLogin(credentials) {
        this.loading = true
        security.SecurityUserHolder.authenticate(credentials)
          .then(() => this.$router.back())
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => this.loading = false)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .login {
        padding: 20px 20px;

        .login-title {
            font-size: 24px;
            line-height: 1rem;
            font-weight: 500;
        }

        .login-safe-tips {
            font-size: 14px;
            color: $gray-6;
            margin-top: 20px;
            line-height: 14px;
        }

        ::v-deep .van-field {
            background: inherit;
            padding: 10px 0;

            .van-field__label {
                width: 70px;
                flex: initial;
            }

            &:after {
                left: 0;
            }
        }

        .login-mobile-field {

            ::v-deep .van-field__label {
                margin: 0;
                position: relative;

                &:after {
                    content: ' ';
                    position: absolute;
                    bottom: 0;
                    top: 4px;
                    background: $gray-4;
                    width: 2px;
                    height: 14px;
                    transform: scaleX(0.5);
                    transform-origin: 0 0;
                    margin: 0 10px;
                }
            }
        }

        .login-other-actions {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .van-button {
                border: none;
                padding: 0;
                height: initial;
                background: inherit;
                min-width: initial;

                &:before {
                    background: inherit;
                }
            }

            .login-other-actions-right {
                display: inline-flex;
            }
        }
    }
</style>
